<template>
  <div class="">
    <van-nav-bar title="首页" fixed> </van-nav-bar>

    <main>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in swiperArr" :key="index">
          <a :href="item.linkUrl">
            <img :src="$publicObj.urlImg(item.url)" alt="" v-lazy="item.url" />
          </a>
        </van-swipe-item>
      </van-swipe>
      <nav>
        <div class="item" @click="$router.push('/atricle')">
          <img src="../../assets/images/index/article.png" alt="" />
          文章
        </div>
        <div class="item" @click="$router.push('/video')">
          <img src="../../assets/images/index/video.png" alt="" />
          视频
        </div>
        <div class="item" @click="$router.push('/post')">
          <img src="../../assets/images/index/poster.png" alt="" />
          海报
        </div>

        <div class="item" @click="$router.push('/resumes')">
          <img src="../../assets/images/index/resume.png" alt="" />
          求职
        </div>
        <div class="item" @click="$router.push('/recruitment')">
          <img src="../../assets/images/index/invite.png" alt="" />
          招聘
        </div>
        <div class="item" @click="$router.push('/articleMaterial')">
          <img src="../../assets/images/index/articlestore.png" alt="" />
          文章库
        </div>
        <div class="item" @click="$router.push('/task')">
          <img src="../../assets/images/index/task.png" alt="" />
          推广
        </div>
        <div class="item" @click="goCheck">
          <img src="../../assets/images/index/check.png" alt="" />
          审核
        </div>
        <div class="item" @click="$router.push('/noActivity')">
          <img src="../../assets/images/index/activity.png" alt="" />
          活动
        </div>
        <div class="item" @click="$router.push('/recruitmentmaterial')">
          <img src="../../assets/images/index/invitestore.png" alt="" />
          招聘文案
        </div>
      </nav>
      <h3>
        <img src="../../assets/images/detail/head.png" alt="" />
        平台资源

        <van-notice-bar
          left-icon="volume"
          scrollable
          color="#FE4066"
          text="平台已发放6583818元赏金"
        />
      </h3>

      <van-sticky offset-top="46px">
        <div class="poster_type">
          <ul>
            <li :class="{ active: type == 1 }" @click="setType(1)">
              文章
              <i></i>
            </li>
            <li :class="{ active: type == 2 }" @click="setType(2)">
              海报
              <i></i>
            </li>
            <li :class="{ active: type == 3 }" @click="setType(3)">
              视频
              <i></i>
            </li>
            <li :class="{ active: type == 4 }" @click="setType(4)">
              活动
              <i></i>
            </li>
            <li :class="{ active: type == 5 }" @click="setType(5)">
              招聘
              <i></i>
            </li>
          </ul>
        </div>
      </van-sticky>

      <div class="welfare" v-if="taskArr.length != 0">
        <!-- @click="$router.push(`/detail?id=${item.id}&from=index`)" -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="onLoad"
        >
          <div
            class="item"
            @click="clickDetail(item.id)"
            v-for="(item, index) in taskArr"
            :key="index"
          >
            <div class="left">
              <img :src="$publicObj.urlImg(item.cover)" v-lazy="item.cover" />
              <img
                src="../../assets/images/task/getMoney.png"
                alt=""
                class="money"
                v-show="item.type == 9 || item.type == 10"
              />
            </div>
            <div class="right">
              <span class="title">{{ item.title }}</span>
              <span class="p" v-if="item.description">{{
                item.description
              }}</span>
              <span class="p" v-if="item.describes">{{ item.describes }}</span>
              <div class="bottom">
                <span>转发:{{ item.share }}次</span>
                <span
                  @click.stop="
                    goDetail(
                      item.id,
                      item.cover,
                      item.title,
                      item.description,
                      item.share,
                      item.score,
                      item.gmtCreate.substring(0, 11)
                    )
                  "
                  >阅读:{{ item.score || 0 }}次</span
                >
                <span>上传时间:{{ item.gmtCreate.substring(0, 11) }}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <van-empty
        :description="`当前暂无${emptyArr[type - 1].title}内容~`"
        class="custom-image"
        :image="emptyArr[type - 1].img"
        v-else
      >
        <van-button
          v-if="type != 4"
          round
          type="danger"
          class="bottom-button"
          @click="goAdd(emptyArr[type - 1].path)"
          >去新建{{ emptyArr[type - 1].title }}</van-button
        >
      </van-empty>
    </main>
  </div>
</template>

<script>
import extract from "../../plugins/extract.js";
export default {
  name: "",
  data() {
    return {
      loading: false,
      finished: false,
      page: 1, //页数
      limit: 8, //条数
      totalPage: "",
      agentId: "", //所属id
      wxUserInfo: {}, //微信用户个人信息
      tasks: {}, //转发任务数量
      swiperArr: [], //轮播图
      type: 1,
      taskArr: [], //任务列表
      detail: "/detail", //详情页
      emptyArr: [
        {
          title: "文章",
          img: require("../../assets/dafault/noarticle.png"),
          path: "/addAticle",
        },
        {
          title: "海报",
          img: require("../../assets/dafault/nopost.png"),
          path: "/addPoster",
        },
        {
          title: "视频",
          img: require("../../assets/dafault/novideo.png"),
          path: "/addVideo",
        },
        {
          title: "活动",
          img: require("../../assets/images/activity/noactivity.png"),
          path: "/addVideo",
        },
        {
          title: "招聘",
          img: require("../../assets/dafault/noinvite.png"),
          path: "/addRecruitment",
        },
      ],
      isPower: 2, //默认是普通用户
      info: "",
      sortType: 0,
      sort: 1,
    };
  },
  //生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    //开启加载
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
    });
    if (!JSON.parse(sessionStorage.getItem("userWxData"))) {
      await extract.wxShare();
    }
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));

    if (this.$route.query.account) {
      sessionStorage.setItem("agentId", this.$route.query.account);
    }
    this.agentId = sessionStorage.getItem("agentId");
    let res = await this.$api.checkAccessLink({ account: this.agentId });
    if (!res.data) return;
    await this.getIndexPersonalInfo();
    // 获取个人信息
    await this.$store.dispatch("updateUserInfo");

    //获取轮播图数据
    this.getswiperArr();
    this.getArticleArr();
    this.isCustomer();
    //关闭加载
    this.$toast.clear();
  },

  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.setType(this.type);
      // 加载状态结束
      this.loading = false;
    },
    //点击跳转详情
    goDetail(id, cover, title, description, share, score, gmtCreate) {
      if (this.isPower == 3) return;
      let str = "";
      if (this.type == 1) {
        str = "文章";
      } else if (this.type == 2) {
        str = "海报";
      } else if (this.type == 3) {
        str = "视频";
      } else if (this.type == 5) {
        str = "招聘";
      }
      let obj = {
        cover,
        title,
        description,
        share,
        score,
        gmtCreate,
      };
      sessionStorage.setItem("taskDetail", JSON.stringify(obj));
      this.$router.push(`/taskDetails?id=${id}&title=${str}`);
    },
    //去审核
    goCheck() {
      if (this.isPower != 1) {
        return this.$toast("您的权限不足！");
      }
      this.$router.push("/proCheck");
    },
    //去创建
    goAdd(path) {
      if (this.isPower == 3 && this.info != " ") {
        return this.$router.push("/mineInstructions");
      } else if (this.isPower == 3 && this.info == " ") {
        return this.$toast("您的权限不足！");
      }
      if (this.isPower !== 3) {
        this.$router.push({ path });
      }
    },
    //判断是否有权限创建
    async isCustomer() {
      let account = sessionStorage.getItem("agentId");
      let res = await this.$api.isCustomer({
        openId: this.wxUserInfo.openid,
        account,
        id: this.$store.state.userInfo.id,
        phone: this.$store.state.userInfo.phone,
      });
      this.isPower = res.data;
      this.info = res.info;
    },
    // 切换
    setType(n) {
      // this.taskArr = [];
      if (this.type != n) {
        this.taskArr = [];
        this.page = 1;
        this.totalPage = "";
      }
      if (n == 1) {
        this.detail = "/detail";
        this.getArticleArr();
      } else if (n == 2) {
        this.detail = "/postDetail";
        this.getPosterList();
      } else if (n == 3) {
        this.detail = "/videoDetail";
        this.getVideoList();
      } else if (n == 5) {
        this.detail = "/recruitmentdetails";
        this.getRecruit();
      }
      this.type = n;
    },
    //点击跳转详情分享
    async clickDetail(id) {
      let str = "";
      let tableType;
      if (this.type == 1) {
        str = "文章";
        tableType = 1;
        return this.$router.push(`${this.detail}?id=${id}&from=index`);
      } else if (this.type == 2) {
        str = "海报";
        tableType = 3;
        return this.$router.push(`${this.detail}?id=${id}&from=index`);
      } else if (this.type == 3) {
        str = "视频";
        tableType = 4;
        return this.$router.push(`${this.detail}?id=${id}&from=index`);
      } else if (this.type == 5) {
        str = "招聘";
        tableType = 15;
        return this.$router.push(`${this.detail}?id=${id}&from=index&type=2`);
      }
    },
    //获取客户ID
    async getIndexPersonalInfo() {
      let obj = {
        account: this.agentId,
        weChatNo: "",
        name: this.wxUserInfo.nickname,
        image: this.wxUserInfo.headimgurl,
        openId: this.wxUserInfo.openid,
        gender: this.wxUserInfo.sex,
        city: this.wxUserInfo.city,
        province: this.wxUserInfo.province,
      };
      let res = await this.$api.getIndexPersonalInfo(obj);
      if (res.code != 0) return this.$toast(res.msg);
      sessionStorage.setItem("agentIds", res.data.id);
    },
    //获取轮播图数据
    getswiperArr() {
      this.swiperArr = this.$store.state.userInfo.systemCoverList.map(
        (item) => {
          return { url: item.url, linkUrl: item.linkUrl };
        }
      );
    },

    //获取文章任务列表
    async getArticleArr() {
      let obj = {
        account: this.agentId,
        // page: 1,
        // limit: 10000000,
        page: this.page,
        limit: this.limit,
        openId: this.wxUserInfo.openid,
        name: this.wxUserInfo.nickname,
        img: this.wxUserInfo.headimgurl,
        tabelType: 1,
        sortType: this.sortType, //排序
        sort: this.sort,
        status: 2,
        type: "8,9",
      };
      let res = await this.$api.getArticleArr(obj);
      if (res.code !== 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.page.list || [];
      } else {
        this.taskArr.push(...res.page.list);
      }
      this.totalPage = res.page.totalPage;
    },
    //获取视频列表
    async getVideoList() {
      let res = await this.$api.getVideoList({
        account: this.agentId,
        page: this.page,
        limit: this.limit,
        agentId: this.agentId,
        tabelType: 4,
        sortType: this.sortType, //排序
        sort: this.sort,
        status: 2,
        type: "8,9",
      });
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.list || [];
      } else {
        this.taskArr.push(...res.data.list);
      }
      this.totalPage = res.data.totalPage;
    },
    //获取海报任务列表
    async getPosterList() {
      let res = await this.$api.getPosterList({
        account: this.agentId,
        page: this.page,
        limit: this.limit,
        agentId: this.agentId,
        tabelType: 3,
        sortType: this.sortType, //排序
        sort: this.sort,
        status: 2,
        type: "8,9",
      });
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.list || [];
      } else {
        this.taskArr.push(...res.data.list);
      }
      this.totalPage = res.data.totalPage;
    },
    //获取招聘列表
    async getRecruit() {
      let res = await this.$api.getRecruit({
        account: this.agentId,
        title: "",
        status: 2,
        type: "8,9",
        page: this.page,
        limit: this.limit,
      });
      if (res.code != 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.taskArr = res.data.list || [];
      } else {
        this.taskArr.push(...res.data.list);
      }
      this.totalPage = res.data.totalPage;
    },
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    document.querySelector("html").style.backgroundColor = "#fff";
    document.querySelector("body").style.backgroundColor = "#fff";
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
/deep/.van-nav-bar .van-icon {
  color: #666666;
}
/deep/.van-sticky--fixed {
  padding: 0 15px;
}
/deep/.van-empty__image {
  width: 166px;
  height: 139px;
}

.bottom-button {
  width: 130px;
  height: 34px;
  background-color: #477fe6;
  border-radius: 17px;
  border: none;
  font-size: 13px;
  color: #ffffff;
}
.poster_type {
  padding: 5px 10px;
  background-color: #fff;
  ul {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    li {
      font-size: 16px;
      color: #666;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      position: relative;
      align-items: center;
      padding: 5px 0;
      i {
        width: 28px;
        height: 3px;

        border-radius: 3px;
        position: absolute;
        bottom: 0;
      }
    }
    .active {
      font-weight: 700;
      color: #000;
      i {
        background-color: #0264d1;
      }
    }
  }
}
main {
  padding: 0 15px;
  margin-bottom: 20px;
  height: calc(100vh - 96px);
  padding-top: 46px;
  overflow-y: scroll;
  .my-swipe {
    height: 150px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 10px;
    .van-swipe-item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-top: 5px;
      width: 20%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      color: #333333;
      letter-spacing: 1px;
      img {
        width: 65px;
        height: 65px;
      }
    }
  }
  .task {
    display: flex;
    justify-content: space-between;
    .item {
      width: 109px;
      height: 75px;
      border-radius: 5px;
      color: #fff;
      border-radius: 10px;
      background: url("../../assets/images/index/bg1.png") no-repeat;
      background-size: 100%;
      &:nth-of-type(2) {
        background: url("../../assets/images/index/bg2.png") no-repeat;
        background-size: 100%;
      }
      &:nth-of-type(3) {
        background: url("../../assets/images/index/bg3.png") no-repeat;
        background-size: 100%;
      }

      h4 {
        font-size: 12px;
        padding: 12px 0;
        text-align: center;
      }
      p {
        font-size: 19px;
        font-weight: 700;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          font-size: 10px;
          font-weight: normal;
        }
      }
    }
  }

  h3 {
    font-size: 16px;
    font-weight: 700;
    color: #333333;
    letter-spacing: 1px;
    margin: 20px 0 10px;
    display: flex;
    align-items: center;
    img {
      width: 4px;
      height: 15px;
      margin-right: 5px;
    }
    p {
      font-size: 12px;
      color: #fe4066;
      display: flex;
      align-items: center;
      margin-left: 11px;
      flex: 1;
      img {
        width: 15px;
        height: 14px;
        margin-right: 6px;
      }
    }
    /deep/.van-notice-bar {
      background-color: rgba(11, 11, 11, 0);
    }
    /deep/.van-icon {
      color: #f7773e;
    }
    /deep/.van-notice-bar__wrap {
      width: 200px;
    }
  }
  .welfare {
    .item {
      display: flex;
      margin-top: 12px;
      .left {
        flex: 1;
        width: 90px;
        height: 90px;
        margin-right: 15px;
        position: relative;
        img {
          width: 90px;
          height: 90px;
          border-radius: 5px;
        }
        .money {
          width: 35px;
          height: 35px;
          position: absolute;
          right: 0;
          top: 0;
          border-radius: none;
        }
      }
      .right {
        flex: 3;
        span {
          font-size: 11px;
          color: #999999;
        }
        .title {
          display: block;
          font-size: 14px;
          color: #333333;
        }
        .p {
          margin-top: 3px;
          height: 35px;
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        .bottom {
          width: 246px;
          margin-top: 8px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

.imgs {
  width: 8px;
  height: 100%;
}
</style>
